<template>
  <div>
    <Card>
      <p slot="title">退货单信息</p>
      <div class="head">
        <div class="head-box">
          <div class="box-item">退货单名称：{{ orderItem.orderName }}</div>
          <div class="box-item">仓库名称：{{ orderItem.shopName }}</div>
          <div class="box-item">退货单号：{{ orderItem.scmRefundId }}</div>
        </div>
        <div class="head-box">
          <div class="box-item">退货总数量：{{ orderItem.refundQty }}</div>
          <div class="box-item">总金额(元)：￥{{ orderItem.refundAmt ? orderItem.refundAmt.toFixed(2) : 0.00 }}</div>
          <div class="box-item">创建时间：{{ this.$date(orderItem.postTime, "yyyy-MM-dd HH:mm:ss") }}</div>
        </div>
        <div class="head-box">
          <div class="box-item">退货原因：{{ orderItem.refundReason }}</div>
          <div class="box-item">备注：{{ orderItem.refundNotes }}</div>
        </div>
      </div>
    </Card>
    <Card style="margin-top: 16px">
      <p slot="title">商品明细</p>
      <Table border :columns="columns" :data="dataGrid"></Table>
    </Card>
    <Button style="float:right;margin-top:15px" @click="Submit" type="primary" v-show="orderItem.refundStatus === 1">一键出库</Button>
    <Modal width="1200" v-model="locationShow" title="货位信息" footer-hide>
      <OutstockLocation :callback="shelfGoodsList" :rowIndex="goodsIndex" :rowItem="rowItem" :key="vueKey"></OutstockLocation>
    </Modal>
  </div>
</template>
<script>
import OutstockLocation from "../../../component/OutstockLocation.vue";
export default {
  name: "detail",
  data() {
    return {
      dataGrid:[],
      rowItem: {},
      shelfSkuList: [],
      locationShow: false,
      shelfList: [],
      goodsIndex: 0,
      vueKey: 0,
      formData: [],
      columns: [
        {
          title: "商品图片",
          key: "goodsImg",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h(
                "img",
                {
                  attrs: {
                    src: params.row.goodsImg,
                  },
                  style: {
                    width: "50px",
                    height: "46px",
                  },
                },
                "View"
              ),
            ]);
          },
        },
        {
          title: "商品条码",
          key: "eanCode",
          width: 160
        },
        {
          title: "商品名称",
          key: "goodsName",
        },
        {
          title: "退货数量",
          key: "goodsQty",
          width: 120,
          sortable: true,
        },
        {
          title: "系统进价(元)",
          key: "systemPrice",
          width: 140,
          sortable: true,
          render: (h, params) => {
            return h("div", [
              h("a", { style: { fontSize: "12px", color: "gray" } }, "￥"),

              h("span", params.row.systemPrice),
            ]);
          },
        },
        {
          title: "退货金额(元)",
          key: "refundAmt",
          sortable: true,
          width: 140,
          render: (h, params) => {
            return h("div", [
              h("a", { style: { fontSize: "12px", color: "gray" } }, "￥"),

              h(
                "span",
                params.row.goodsQty * params.row.systemPrice
              ),
            ]);
          },
        },
        {
          title: "供应商",
          key: "supplierOrgName",
        },
        {
          title: "选择货位",
          key: "shelfLable",
          width: 220,
          // show: (this.orderItem.orderStatus!=1||this.orderItem.orderStatus!=0)?false:true,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    size: "small",
                    width: 100,
                  },
                  style: {
                    display:
                      params.row.shelfLable == "" ? "inline-block" : "none",
                  },
                  on: {
                    click: () => {
                      this.focusChange(params.row, params.index);
                    },
                  },
                },
                "货位选择"
              ),
              h(
                "span",
                {
                  style: {
                    display:
                      params.row.shelfLable != "" ? "inline-block" : "none",
                  },
                  on: {
                    click: () => {
                      this.focusChange(params.row, params.index);
                    },
                  },
                },
                params.row.shelfLable
              ),
            ]);
          },
        },
      ]
    }
  },
  props: {
    orderItem: Object,
    callbank: Function
  },
  created() {},
  components: {
    OutstockLocation,
  },
  methods: {
    shelfGoodsList(data) {
      this.locationShow = false
      this.shelfSkuList = data.data;
      this.dataGrid[data.index].shelfSkuList = data.data;
      let str = "";
      this.dataGrid[data.index].shelfSkuList.forEach((item) => {
        delete item.checked;
        delete item.indeterminate;
        delete item.nodeKey;
        str += '货位:' + item.shelfCode + ",数量:" + item.count + "" + "/";
      });
      this.dataGrid[data.index].shelfLable = str.substring(0,str.length-1)
    },
    focusChange(row, index) {
      this.rowItem = row
      this.goodsIndex = index
      this.locationShow = true
    },
    Submit() {
      let formlist = []
      /* let bool = false
      this.dataGrid.forEach((item) => {
        if (item.shelfSkuList.length === 0) {
          bool = true
          return
        }
      })
      if(bool) {
        this.$Message.warning("请选择出库货位")
        return false
      } */
      let orderTotal = 0
      for(let item of this.dataGrid) {
        let sku_qty = 0
        if (item.shelfSkuList.length === 0) {
          item.shelfSkuList.push({
            count: item.goodsQty
          })
        }
        item.shelfSkuList.forEach((ob) => {
          sku_qty += ob.count
          delete ob.count
        })
        if(sku_qty > item.goodsQty) {
          this.$Message.warning({
            content: `【${item.goodsName}】出库数量不能大于订单数量`,
            duration: 3
          })
          return
        }
        orderTotal += sku_qty
        let formData = {
          osbType: 5, //5退货出库
          refundOrderId: this.orderItem.scmRefundId,
          osbPrice: item.systemPrice,
          skuId: item.skuId,
          osbQty: sku_qty,
          eanCode: item.eanCode,
          skuName: item.goodsName,
          skuUom:  item.skuUom,
          storeId: this.$store.getWms('warehouseId'),
          shelfSkuList: item.shelfSkuList
        }
        formlist.push(formData)
      }
      if(orderTotal <= 0) {
        this.$Message.warning("总出库数量不能小于等于零")
        return
      }
      this.doOutstock(formlist,orderTotal)
    },
    //出库
    doOutstock(formlist,orderTotal) {
      this.$Modal.confirm({
        title: "一键出库",
        content: `出库总数量为【${orderTotal}】，确认出库后不可撤消`,
        width: 416,
        onOk: () => {
          new this.$rest({
            gateway: 'agroerp',
            service: "agroerp-wms",
            url: "/v1.0/plus/smart/outstock",
            data: {
              pojo: formlist,
            },
            action: (res) => {
              if (res.data.code === 20000) {
                this.$message({
                  message: "出库成功",
                  type: "success",
                });
                this.callbank()

              } else {
                this.$Notice.warning({
                  title: "发货失败",
                  desc: `失败原因：${res.data.msg}`,
                });
              }
            },
          }).post()
        }
      })
    },
    init(id) {
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-order",
        url: "/v1.0/mall/refund/order/detail/page",
        query: {
          equal: {
            scmRefundId: id
          }
        },
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data.list
            data.forEach(element => {
              element.shelfLable = []
              element.shelfSkuList = []
            });
            this.dataGrid = data
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).get();
    },
  },
};
</script>
<style lang="less" scoped>
.page {
  width: 100%;
}
.head {
  width: 100%;
}
.head-title {
  font-size: 20px;
  height: 40px;
  font-weight: bold;
}
.head-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  min-height: 30px;
}
.box-item {
  width: 30%;
}
.btns{
  margin: 16px 0px;
}
.item-image{
  display: flex;
  align-items: flex-start;
}
</style>